<template>
  <div class="feedback bWH p24 wp100 hp100">
    <div class="hp100 wp40">
      <el-form ref="ruleForm" :model="params" :rules="rules" label-width="5rem" class="pub_form_item">
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="params.contact" placeholder="请输入微信、QQ、手机号、邮箱任一一个" class="pub_input" :maxlength="30" />
        </el-form-item>
        <el-form-item label="意见建议" prop="content">
          <el-input v-model="params.content" placeholder="请输入意见或者建议，十分感谢您的建议" type="textarea" class="pub_input" rows="5" :maxlength="500" />
        </el-form-item>
      </el-form>
      <div class="fle mt20">
        <el-button type="text" class="pub_button public_confirm_btn" @click="submitBtnClick">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { debounce } from '@/utils/debounce';
export default {
  data() {
    return {
      params: { contact: '', content: '' },
      // 表单验证规则
      rules: {
        contact: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { max: 30, message: '联系方式不能超过30个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入意见或者建议', trigger: 'blur' },
          { max: 500, message: '意见建议不能超过500个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitBtnClick: debounce(async function() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$api.post(this.$url.feedbackCommit, this.params);
          if (res.code == 200) {
            this.$message.success('感谢提交');
            this.params = { contact: '', content: '' };
          } else {
            this.$message.success('提交失败');
          }
        }
      });
    }, 500)
  }
};
</script>